<template>
  <a-modal v-model:visible="visible" title="订阅列表" :footer="null" :width="1000">
    <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange" />
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref, watch } from 'vue'

  import { requestGetSubByService } from '/@/api/manage/openApiServiceProvider'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatToDate } from '/@/utils/date'
  const props = defineProps({
    visible: { type: Boolean, default: false },
    id: { type: String, default: '' },
  })
  /** 表格列配置 */
  const columns = [
    { title: '服务分类', dataIndex: 'serviceTypeName' },
    { title: '服务名称', dataIndex: 'serviceName' },
    { title: '订阅组名称', dataIndex: 'appName' },
    { title: '申请人账号', dataIndex: 'userName' },
    { title: '申请人类型', dataIndex: 'companyName' },
    { title: '申请时间', dataIndex: 'createdTime', customRender: ({ text }) => formatToDate(text) },
  ]

  const searchParam = computed(() => ({
    serviceUuid: props.id,
  }))

  const { loading, queryList, dataList, pagination, onPaginationChange, updateQuery } = useQueryPagination<SubByServiceApiTypes.IRequest, SubByServiceApiTypes.IResponse[]>(searchParam.value, requestGetSubByService)

  // onMounted(() => queryList())
  watch(
    () => props.id,
    (res) => {
      if (res) {
        updateQuery({ serviceUuid: res })
        queryList()
      }
    },
  )
  const emits = defineEmits(['update:visible'])

  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })
</script>

<style lang="less"></style>
